<!--
 * @Author: xiaxia
 * @Description: 
 * @Date: 2023-09-13 14:58:00
 * @LastEditTime: 2024-06-03 11:22:24
 * @FilePath: \vue-admin-template\src\components\issueInvioce\module\Purchaser.vue
-->
<template>
  <div>
    <Information :title="'购买方信息'" :showInfo.sync="showInfo">
      <el-form 
        ref="buyForm"
        size="mini"
        :model="buyForm" 
        label-width="100px"
        label-position="left"
      >
        <el-form-item label="购方名称" prop="custName">
          <div style="display: flex;">
            <el-input v-model="buyForm.custName" placeholder="请输入"></el-input>
            <el-button class="butC" icon="el-icon-tickets" type="primary" @click="showD" size="mini"></el-button>
          </div>
        </el-form-item>
        <el-form-item label="购方税号" prop="custTaxcode">
          <el-input v-model="buyForm.custTaxcode" placeholder="请输入"></el-input>
        </el-form-item>
        <div v-show="showInfo">
          <el-form-item label="购买方地址" prop="custAddress">
            <el-input v-model="buyForm.custAddress" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="custTelephone">
            <el-input v-model="buyForm.custTelephone" placeholder="请输入"></el-input>
          </el-form-item>
          <el-col :span="20" style="padding-left: 0;">
            <el-form-item label="购方开户银行" prop="custBankname">
              <el-input v-model="buyForm.custBankname" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="银行账户" prop="custBankaccount">
              <el-input v-model="buyForm.custBankaccount" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div style="height: 80px; display: flex; justify-content: center;align-items: center;">
              <el-checkbox v-model="gfBank" @change="gfBankC">是否展示</el-checkbox>
            </div>
          </el-col>
        </div>
      </el-form>
    </Information>

    <!-- 弹窗 -->
    <el-drawer
      title="购买方信息"
      size="700px"
      :visible.sync="drawerShow"
    >
      <!-- 查询 -->
      <el-form inline :model="searchForm" status-icon label-width="100px" >
        <el-form-item label="购方名称" prop="custName">
          <el-input v-model="searchForm.custName" clearable></el-input>
        </el-form-item>
        <el-form-item label="纳税人识别号" prop="custTaxcode">
          <el-input v-model="searchForm.custTaxcode" clearable></el-input>
        </el-form-item>
        <el-form-item label=" ">
          <el-button type="primary" @click="searchBuy()">查询</el-button>
          <el-button @click="resetBuy()">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table :data="buyData" class="drawerC">
        <el-table-column type="index" label="序号" width="50" show-overflow-tooltip></el-table-column>
        <el-table-column prop="custName" label="名称" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="custTaxcode" label="纳税人识别号" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="custAddress" label="地址" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="custTelephone" label="电话" width="130" show-overflow-tooltip></el-table-column>
        <el-table-column prop="custBankname" label="开户行" width="140" show-overflow-tooltip></el-table-column>
        <el-table-column prop="custBankaccount" label="银行账户" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column fixed="right" label="操作" width="80">
        <template #default="{row}">
          <el-button
            @click="chooBuy(row)"
            type="text"
            size="small">
            选择
          </el-button>
        </template>
      </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="hSizeChange"
        @current-change="hCurrentChange"
        :current-page="searchForm.pageNum"
        :page-sizes="[10, 15, 20]"
        :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="searchForm.rowCount">
      </el-pagination>
    </el-drawer>
  </div>
</template>

<script>
import Information from "@/components/issueInvioce/module/Information.vue";
export default {
  components:{
    Information
  },
  data() {
    return{
      buyData: [],
      showInfo: false,
      buyForm:{
        custName: '',
        custTaxcode: '',
        custAddress: '',
        custTelephone: '',
        custBankname: '',
        custBankaccount: '',
        gfBank: '0',
      },
      gfBank: false,
      drawerShow: false, // 选择购方信息
      searchForm: {
        custName: '', // 购方名称
        custTaxcode: '', // 纳税人识别号
        pageSize: 10,
        pageNum: 1,
        rowCount: 0,
      }
    }
  },
  methods:{
    // 是否展示
    gfBankC(val) {
      if(val) {
        this.buyForm.gfBank = '1'
      } else {
        this.buyForm.gfBank = '0'
      }
    },
    // 查询 购方
    async searchBuy() {
      // const { data: res } = await queryAllCust(this.searchForm)
      // if(!res.success) return this.$message.error('查询购方信息失败！'+res.msg)
      // this.buyData = res.data.customerMsgs
      // this.searchForm.rowCount = res.data.rowCount
    },
    showD() {
      this.searchBuy()
      this.drawerShow = true
    },
    chooBuy(row){
      this.buyForm.custName = row.custName
      this.buyForm.custTaxcode = row.custTaxcode
      this.buyForm.custAddress = row.custAddress
      this.buyForm.custTelephone = row.custTelephone
      this.buyForm.custBankname = row.custBankname
      this.buyForm.custBankaccount = row.custBankaccount
      this.drawerShow = false
    },
    resetBuy() {
      this.searchForm = {
        custName: '', // 购方名称
        custTaxcode: '', // 纳税人识别号
        pageSize: 10,
        pageNum: 1,
        rowCount: 0,
      }
      this.searchBuy()
    },
    hSizeChange(size) {
      this.searchForm.pageSize = size
      this.searchBuy()
    },
    hCurrentChange(num) {
      this.searchForm.pageNum = num
      this.searchBuy()
    }
  }
}
</script>

<style scoped lang="scss">
.drawerC{
  padding: 0 20px;
}
.butC{
  margin-left: 10px;
  padding:7px 10px;
}
</style>